Goal Choice Image

goalChoiceImage is a template that supports single and multiple choices.

Key	Notes
`type`	`goalChoiceImage`
`stepId`	Unique step id
`title`	The step title
`subtitle`	The step subtitle
`selectMode`	`single` or `multiple`
`shapeMode`	`square` or `rectangular` (check the screenshots below)
`choiceBackgroundColor`	The background color of the choices.
`choiceTextColor`	The text color of the choices
`hoverBackgroundColor`	The hover color.
`selectedChoiceBorderColor`	The border color of the selected choice.
`choices`	An array of the choices on that step `"choices": [` `{` `"imageUrl": "https://c.thefab.co/web-onboarding/shape/ibs/icons/18.1.png",` `"name": "Effective, but unsustainable",` `"value": "Effective, but unsustainable"` `},` `{` `"imageUrl": "https://c.thefab.co/web-onboarding/shape/ibs/icons/18.2.png",` `"name": "Somewhat effective",` `"value": "Somewhat effective"` `},` `{` `"imageUrl": "https://c.thefab.co/web-onboarding/shape/ibs/icons/18.3.png",` `"name": "Ineffective",` `"value": "Ineffective"` `}` `]`
`textColor`	The main textColor on the page
`ctaText`	The text of the main button
`ctaColor`	The text color of the main button
`ctaBackgroundColor`	The background color of the main button
`ctaHoverBackgroundColor`	The background of the main button on hovering.
`backButtonColor`	The text color of the back button
`backButtonBackgroundColor`	The background color of the back button
`backButtonText`	The text of the back button

Examples

Goal choice single cohice - rectangular

{
"type": "goalChoiceImage",
"stepId": "step_14",
"title": "How often do digestive symptoms prevent you from a quality life?",
"backgroundColor": "#FFF4EE",
"textColor": "#251C93",
"ctaText": "Continue",
"ctaColor": "#FFF",
"ctaBackgroundColor": "#3425B8",
"ctaHoverBackgroundColor": "#2A1E93",
"backButtonColor": "#FFA133",
"backButtonBackgroundColor": "#FFF",
"selectMode": "single",
"shapeMode": "rectangular",
"backButtonText": "Back",
"choiceBackgroundColor": "#fff",
"choiceTextColor": "#251C93",
"hoverBackgroundColor": "rgba(255, 255, 255, 0.60)",
"selectedChoiceBorderColor": "#3425B8",
"choices": [
    {
        "imageUrl": "https://c.thefab.co/web-onboarding/shape/ibs/icons/14.1.png",
        "name": "Every day",
        "value": "Every day"
    },
    {
        "imageUrl": "https://c.thefab.co/web-onboarding/shape/ibs/icons/14.2.png",
        "name": "4+ times a week",
        "value": "4+ times a week"
    },
    {
        "imageUrl": "https://c.thefab.co/web-onboarding/shape/ibs/icons/14.3.png",
        "name": "About once a week",
        "value": "About once a week"
    },
    {
        "imageUrl": "https://c.thefab.co/web-onboarding/shape/ibs/icons/14.4.png",
        "name": "2-3 times a month",
        "value": "2-3 times a month"
    },
    {
        "imageUrl": "https://c.thefab.co/web-onboarding/shape/ibs/icons/14.5.png",
        "name": "About once a month",
        "value": "About once a month"
    },
    {
        "imageUrl": "https://c.thefab.co/web-onboarding/shape/ibs/icons/14.5.png",
        "name": "Never",
        "value": "Never"
    }
]
}

Goal choice multipe cohice - square

  {
      "type": "goalChoiceImage",
      "stepId": "step_11",
      "title": "Have you noticed any triggers of symptoms?",
      "backgroundColor": "#FFF4EE",
      "textColor": "#251C93",
      "ctaText": "Continue",
      "ctaColor": "#FFF",
      "ctaBackgroundColor": "#3425B8",
      "ctaHoverBackgroundColor": "#2A1E93",
      "backButtonColor": "#FFA133",
      "backButtonBackgroundColor": "#FFF",
      "selectMode": "multiple",
      "shapeMode": "square",
      "backButtonText": "Back",
      "choiceBackgroundColor": "#fff",
      "choiceTextColor": "#251C93",
      "hoverBackgroundColor": "rgba(255, 255, 255, 0.60)",
      "selectedChoiceBorderColor": "#3425B8",
      "choices": [
          {
              "imageUrl": "https://c.thefab.co/web-onboarding/shape/wave-1.svg",
              "name": "Stress",
              "value": "Stress"
          },
          {
              "imageUrl": "https://c.thefab.co/web-onboarding/shape/wave-2.svg",
              "name": "Certain foods",
              "value": "Certain foods"
          },
          {
              "imageUrl": "https://c.thefab.co/web-onboarding/shape/wave-3.svg",
              "name": "Medications",
              "value": "Medications"
          },
          {
              "imageUrl": "https://c.thefab.co/web-onboarding/shape/wave-4.svg",
              "name": "Hormones",
              "value": "Hormones"
          },
          {
              "imageUrl": "https://c.thefab.co/web-onboarding/shape/wave-5.svg",
              "name": "Changes in routine",
              "value": "Changes in routine"
          },
          {
              "imageUrl": "https://c.thefab.co/web-onboarding/shape/wave-3.svg",
              "name": "Exercise",
              "value": "Exercise"
          },
          {
              "imageUrl": "https://c.thefab.co/web-onboarding/shape/wave-4.svg",
              "name": "Weather",
              "value": "Weather"
          },
          {
              "imageUrl": "https://c.thefab.co/web-onboarding/shape/wave-5.svg",
              "name": "Sleep disturbances",
              "value": "Sleep disturbances"
          }
      ]
  }
  

Examples​

Examples